<template>
	<view class="content">
		<view>
			<swiper class="swiper">
				<swiper-item class="swiper-item" v-for="item in swiperList">
					<image :src="item.path" mode="scaleToFill" style="width: 100%;height: 100%;"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- swiper end -->
		<view class="menuBox">
			<view style="margin-left: 8%;margin: 20rpx 0;">
				<!-- <uni-data-checkbox v-model="radioData" :localdata="type"  ></uni-data-checkbox> -->
			</view>
			<view style="width: 90%;margin: 0 auto;">
				<uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="searchInput" placeholder="搜索" @iconClick="search"></uni-easyinput>
			</view>
			<view class="menu" v-for="item in categoryList" @click="goCard(item.id)">
				<image :src="item.imagePath" mode="aspectFit"></image>
				<text >{{item.name}}</text>
			</view>
		</view>
		
		<!-- menu结束 -->
		
		<view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-left">
				<index-card v-for="item in leftContentList" :desciption="item.desc" :title="item.name" :cover="item.imagePath" type="2" :likeCount="item.likeCount" :commentCount="item.commentCount" :id="item.id" :bookName="item.bookName"></index-card>
			</scroll-view>
			
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-right">
				<index-card v-for="item in rightContentList" :desciption="item.desc" :title="item.name" :cover="item.imagePath" type="2" :likeCount="item.likeCount" :commentCount="item.commentCount" :id="item.id" :bookName="item.bookName"></index-card>
			</scroll-view>
		</view>
		
		<!-- <uni-fab  horizontal="right" vertical="bottom" :pattern="fabPattern" style="width: 45px;height: 45px;" @click="goAdd"/> -->
	</view>
	
	
	
</template>

<script setup>
	import {onReady,onShow} from "@dcloudio/uni-app"
	import {ref} from "vue";
	import {baseUrl} from "../../static/js/util.js"
	import indexCard from "../../components/index-card/index-card.vue"
	
	let pageSize=10;
	let pageNo=1;
	let params={
		pageNo,
		pageSize
	}
	
	let title=ref("OK")
	let desc=ref('https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg')
	let cover=ref('../../static/logo.png')
	let book="book"
	let post="post";

	let fabPattern={
		buttonColor: '#fff',
		iconColor: '#c0c0c0'
	}
	let searchInput=ref("")
	let radioData=ref([2])
	
	let type=[{
		text: '搜书籍',
		value: 1
	}, {
		text: '搜帖子',
		value: 2,
		checked:true
	}]
	if(desc.value.length>10){
		desc.value=desc.value.substring(0,30)+"...";
	}
	
	let swiperList=ref([])
	let contentList=[]
	let leftContentList=ref([])
	let rightContentList=ref([])
	let categoryList=ref([])
	
	function goAdd(){
		uni.navigateTo({
			url:'/pages/add/add'
		})
	}
	
	function search(){
		uni.navigateTo({
			url:'/pages/cards/cards?search='+searchInput.value+'&type='+radioData.value
		})
	}
	
	function goCard(categoryId){
		uni.navigateTo({
			url:'/pages/cards/bookCards?categoryId='+categoryId
		})
	}

	onShow(()=>{
		//获取轮播图
		uni.request({
			url:baseUrl+"/file/swiperList",
			success:res=>{
				swiperList.value=res.data.data
			}
		})
		//获取内容列表
		uni.request({
			url:baseUrl+"/book/list",
			method:'POST',
			data:params,
			success:res=>{
				contentList=res.data.data.result
				const middleIndex = Math.ceil(contentList.length / 2);
				leftContentList.value = contentList.splice(0, middleIndex);  
				if(middleIndex>0){
					
					rightContentList.value = contentList.splice(-middleIndex);
					// console.log(rightContentList.value[0])
				}
			}
		})
		//获取分类列表
		uni.request({
			url:baseUrl+"/category/list",
			method:'GET',
			success:res=>{
				categoryList.value=res.data.data
			}
		})
	})
	

	
</script>

<style lang="scss" scoped>
	.swiper{
		margin-top: 10rpx;
		width: 100%;
		height: 250rpx;
		.swiper-item{
			width: 100%;
			height: 200rpx;
			background-color: #8f8f94;
		}
	}
	
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.menuBox{
		height: 200rpx;
	}
	.menu{
		float: left;
		margin-top: 10rpx;
		width: 25%;
		height: 50%;
		text-align: center;
		image{
			width:100%;
			height: 70%;
		}
		text{
			position: relative;
			bottom: 10rpx;
			height: 30%;
			font-size: 25rpx;
		}
	}
	.scroll-left{
		float: left;
		width: 50%;
		padding-bottom: 150rpx;
	}
	.scroll-right{
		float: right;
		width: 50%;
	}
	.card{
		width: 95%;
		max-height: 500rpx;
		image{
			width: 90%;
			height: 300rpx;
		}
		text{
			height: 30%;
		}
	}
	.card-actions-item{
		float: left;
		margin-left: 15rpx;
	}
</style>
